<%@ page import="java.util.Date" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: MOZZ
  Date: 2021/12/15
  Time: 22:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="user" value="${sessionScope.user}" />
<c:if test="${user==null}">
    <c:redirect url="login.jsp" />
</c:if>
<html>

<head>
    <title>时间线</title>
    <link rel="stylesheet" href="public/css/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="public/css/timeline.css">
    <link rel="stylesheet" href="public/css/iconfont.css">
    <link rel="stylesheet" href="public/css/layout/header.css">
</head>

<body>
    <div class="banner">
        <div class="banner-bg"></div>
        <div class="type-box">
            <div id="typeWriter"></div>
            <span class="cursor"></span>
        </div>
    </div>
    <div class="tar-bar">
        <div class="left-box">
            <div class="menu-item">
                <a href="codeBlog"><span class="iconfont icon-home"></span>首页</a>
            </div>
            <div class="menu-item">
                <a href="timeline.jsp?userId=${user.id}"><span class="iconfont icon-time-line"></span>时间轴</a>
            </div>
            <div class="menu-item">
                <a href="TagsServlet"><span class="iconfont icon-tag"></span>标签</a>
            </div>
            <div class="menu-item">
                <span class="iconfont icon-about"></span> 关于
            </div>
        </div>
        <div class="right-box">
            <div class="menu-item">
                <a href="CategoryServlet?userId=${user.id}"><span class="iconfont icon-folder-open"></span>分类</a>
            </div>
            <c:if test="${user!=null}">
                <div class="menu-item">
                    <!-- <span><a href="UserHomeServlet?userId=${user.id}"><c:out value="${user.nickName}"/></a></span>
                <div class="avatar-box">
                    <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                </div> -->
                    <a href="UserHomeServlet?userId=${user.id}"><span class="iconfont icon-user"></span>个人中心</a>
                </div>
            </c:if>
            <c:if test="${user==null}">
                <div class="menu-item">
                    <a href="login.jsp">
                        <button class="btn btn-success">登录</button>
                    </a>
                </div>
            </c:if>
            <div class="menu-item public-btn">
                <a href="add_blog.jsp">
                    <button class="btn">发表博客</button>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="timeline-box">

        </div>
    </div>
</body>
<script src="public/js/jquery/jquery.js"></script>
<script src="public/js/typewriter.js"></script>

<script>
    let userId = '${user.id}'
    let timeline = []
    $(function () {
        // 发起ajax请求，获取用户的所有博客
        $.ajax({
            url: 'QueryBlogsByUserIdServlet',
            dataType: 'json',
            data: {
                userId
            },
            success: result => {
                if (result.length == 0) {
                    $('#timeline-box').append("<p>暂无博客</p>");
                    return
                }
                console.log(result)
                let maxDate = new Date(result[0].publicTime)
                let minDate = new Date(result[result.length - 1].publicTime)
                console.log("最大时间", maxDate.toUTCString())
                console.log("最小时间", minDate.toUTCString())
                // 生成年数组对象
                if (maxDate.getFullYear == minDate.getFullYear()) {
                    timeline = [{
                        year: maxDate.getFullYear()
                    }]
                } else {
                    for (let i = maxDate.getFullYear(); i >= minDate.getFullYear(); i--) {
                        timeline.push({
                            year: i,
                            months: []
                        })
                    }
                }
                timeline.forEach(item => {
                    for (let i = 1; i <= 12; i++) {
                        item.months.push({
                            month: i,
                            blogs: []
                        })
                    }
                })
                // 循环所有的博客，添加到对应的月份中
                console.log(timeline)
                result.forEach(blog => {
                    let publicTime = new Date(blog.publicTime)
                    timeline.forEach(year => {
                        if (publicTime.getFullYear() == year.year) {
                            year.months.forEach(item => {
                                if (publicTime.getMonth() + 1 == item
                                    .month) {
                                    item.blogs.push(blog)
                                }
                            })
                        }
                    })
                })

                // 遍历时间线，生成DOM节点
                timeline.forEach(year => {
                    let html = $('<div class="year">' + year.year + '</div>')
                    $('#timeline-box').append(html)
                    year.months.forEach(month => {
                        if (month.blogs.length != 0) {
                            let monthHtml = $('<div class="month">' + month.month +
                                '月</div>')
                            $('#timeline-box').append(monthHtml)
                            let blogBox = $('<div class="blog-box"></div>')
                            $('#timeline-box').append(blogBox)
                            month.blogs.forEach(item => {
                                let dateString = new Date(item.publicTime)
                                    .getMonth() + 1 + '/' + new Date(item
                                        .publicTime).getDate()
                                let blogHtml = $(
                                    '<div class="blog-item"><div class="date"><span class="iconfont icon-calendar"></span>' +
                                    dateString +
                                    '</div><div class="blog-title"><a href="BlogDetailServlet?id=' +
                                    item.id + '">' + item.title +
                                    '</a></div></div>')
                                $('.blog-box').append(blogHtml)
                            })
                        }
                    })
                })


            },
            error: error => {
                console.log(err)
            }
        })
    })
</script>

</html>